<template>
	<view class="integral-detail-wrapper" :style="{paddingTop: paddingTop + 'px'}">
		<navBar title="积分明细" backgroundColor="#EE3B3B" fontColor="#fff" />
		<view class="integral-detail-content" :style="{top: paddingTop + 'px'}">
			<view class="detail-header">
				<view class="kehu">
					<view @click="getRules">积分规则</view>
				</view>
				<view class="integral-info">
					<view class="info">
						<view class="count">
							{{ integralInfo.notUsed  }}
						</view>
						<view class="tip">
							<text>温馨提示：</text>
							<text class="date">90天内即将过期 {{ integralInfo.expiringSoon }} 积分</text>
						</view>
					</view>
					<view class='btn'>
						<u-button text="积分商城" :plain="true" shape="circle" @click="goShop"></u-button>
					</view>
				</view>
			</view>
			<view class="tab">
				<view class="item-box">
					<view class="item" @click="handleTab(-1)" :class="{'active': currentTab == -1}">全部</view>
				</view>

				<view class="item-box">
					<view class="item" @click="handleTab(0)" :class="{'active': currentTab == 0}">收入</view>
				</view>
				<view class="item-box">
					<view class="item" @click="handleTab(1)" :class="{'active': currentTab == 1}">支出</view>
				</view>
			</view>
			<view class="log-list">
				<view class="list-item" v-for="item in logsList">
					<view class="item-left">
						<view class="title">{{ item.changeCauseText }}{{ item.remarks ? '-'+item.remarks:'' }}</view>
						<view class="date">{{ item.changeTime }}</view>
					</view>
					<view class="count" :class="{'active': item.changeType == 1}">
						<view>{{ item.integral }}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" v-if="loadVisible" :contentText="contentText" />
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/common/config'
	import navBar from '@/components/navBar.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				integralInfo: {},
				paddingTop: '',
				currentTab: -1,
				logsList: [],
				pageNum: 1,
				twoTypeName: '商城实物礼品',
				total: 0,
				status: 'more',
				loadVisible: false,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了",
				},
			}
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
		},
		methods: {
			handleTab(val) {
				this.currentTab = val
				this.goodsList = []
				this.pageNum = 1
				this.changeType = val
				this.logsList = []
				if (val == -1) {
					this.changeType = null
				}

				this.getLogsList()
			},
			//获取积分规则
			getRules() {
				uni.navigateTo({
					url: `/indexPack/integral/integralRules`
				})		
			},
			//积分
			async getIntegralInfo(id) {
				try {
					const res = await this.$request({
						url: '/marketing-center/integralRuleDetails/getUserIntegral',
						data: {
							pageSize: 10,
							pageNum: 1,
							userId: this.getUserInfo.id
						}
					})
					this.integralInfo = res.datas
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
				uni.stopPullDownRefresh();
			},
			//获取明细列表
			async getLogsList() {
				try {
					//积分
					const res = await this.$request({
						url: '/marketing-center/integralRuleDetails/list',
						data: {
							pageSize: 10,
							pageNum: this.pageNum,
							userId: this.getUserInfo.id,
							changeType: this.changeType == -1 ? null : this.changeType
						}
					})
					this.logsList = this.logsList.concat(res.datas.data)
					this.total = res.datas.count
					this.status = 'more'
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
				uni.stopPullDownRefresh();
			},
			//电话
			callPhone() {
				// 区分设备
				if (uni.getSystemInfoSync().osName === 'ios') {
					uni.makePhoneCall({
						phoneNumber: '400-696-5399'
					})
				} else {
					uni.showModal({
						title: "拨打电话",
						content: '400-696-5399',
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: '400-696-5399'
								})
							}
						}
					})
				}
			},
			//查看积分明细
			goShop() {
				uni.navigateTo({
					url: `/indexPack/integral/shop`
				})
			}
		},
		onReachBottom() {
			if (this.logsList.length >= this.total) {
				this.status = 'noMore'
				return
			}
			this.loadVisible = true
			this.status = 'loading'
			this.pageNum++
			this.getLogsList()
		},
		onPullDownRefresh() {
			this.loadVisible = false
			this.pageNum = 1
			this.logsList = []
			this.getLogsList()
		},
		onLoad(option) {
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			uni.showLoading({
				title: '加载中...'
			})
			this.pageNum = 1
			this.getIntegralInfo()
			this.getLogsList()
			// const eventChannel = this.getOpenerEventChannel()
			// eventChannel.on('detailInfo', this.getDetailInfo(option.id))
		},

	}
</script>

<style lang="scss" scoped>
	.integral-detail-wrapper {
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);

		.detail-header {
			height: 260rpx;
			background: #EE3B3B;

			.kehu {
				display: flex;
				justify-content: flex-end;
				color: #fff;
				padding-right: 46rpx;
			}

			.integral-info {
				padding: 50rpx 38rpx 0 56rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;

				/deep/ .u-button--plain.u-button--info {
					color: #000;
				}

				.info {
					.count {
						font-size: 30px;
						font-weight: bold;
						padding-bottom: 18rpx;
					}

					.tip {
						font-size: 12px;

						.date {
							font-size: 14px;
						}
					}
				}
			}
		}

		.tab {
			padding: 20px 36px 20rpx 36rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			width: calc(100% - 72rpx);

			.item-box {
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.item {
				width: 50px;
				font-size: 16px;
				font-weight: 400;
				text-align: center;
				color: #000000;
				padding-bottom: 14rpx;
				border-bottom: 2px solid #fff;
			}


			.active {
				transition: all .5s;
				color: #CF1A1B;
				border-bottom: 2px solid #CF1A1B;
			}
		}

		.log-list {
			margin: 20rpx;

			.list-item {
				margin-bottom: 20rpx;
				width: calc(100% - 64rpx);
				background: #fff;
				padding: 46rpx 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.count {
					font-weight: 400;
					color: #EE3B3B;
				}

				.active {
					color: rgba(0, 0, 0, 0.65);
				}

				.item-left {
					font-size: 14px;

					.title {
						font-weight: 400;
						color: rgba(0, 0, 0, 0.85);
						padding-bottom: 30rpx;
						line-break: anywhere;
						padding-right: 20rpx;
					}

					.date {
						font-weight: 400;
						color: rgba(0, 0, 0, 0.45)
					}
				}
			}
		}
	}
</style>
